<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页面</title>
    <!--引入JS-->
    <script src="/js/jquery-2.2.4.js"></script>
    <style>
        .gridtable{
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        .gridtable th{
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        .gridtable td{
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<h1>主页面</h1>
<h2>这个页面需要渲染数据，数据从哪来？后台API返回！！！</h2>
<div onclick="getData()">点我 获取 数据</div>
<div onclick="dianji()">点我 修改 标签内容</div>
<!--"javascript:void(0);"  不做任何js动作 -->
<input type="text" id="ipt"><a href="javascript:void(0);" id="abtn" onclick="query_search();">搜索</a>
<div id="div1">这个DIV会被修改</div>
</body>
<script>
    // window.onload 加载事件，浏览器打开地址就要加载
    window.onload = getData();
    //JS的Object类型
    var params = {
        name : "",
        sex : ""
    };
    //JS的示例
    function dianji(){
        let str = "";
        for(var i = 0 ; i<5 ; i++){
            params.name = "张三";
            params.sex = "女";
            str = str + "<h1>"+params.name +",这是一段修改后的文本,"+ params.sex+"</h1>"
        }
        alert(str);
        document.getElementById("div1").innerHTML = str;
    }
    //加载数据的方法，里面有AJAX向后台发送请求。
    function getData(){
        //AJAX向后台发起请求
        $.ajax({
            async:false,//是否异步请求
            url:"/shopInfo/query",//请求地址
            type:"GET",//请求方式
            data:{shop_info_name:document.getElementById("ipt").value},
            dataType:"json",//指定返回数据类型
            success:function(data){
                //alert("success:"+data);
                console.log(data.code);
                let list = data.data.data;
                let str = "<table class='gridtable'>";
                str = str + "<tr>" +
                    "<th>名字</th><th>价格</th><th>备注</th><th>操作</th>" +
                    "</tr>";
                for(var i=0;i<list.length;i++){
                    console.log(list[i].shop_info_name+","+list[i].shop_info_price+","+list[i].shop_info_remark);
                    str = str + "<tr>" +
                        "<td>"+return_Type(list[i].shop_info_name)+"</td>"   +
                        "<td>"+return_Type(list[i].shop_info_price)+"</td>"  +
                        "<td>"+return_Type(list[i].shop_info_remark)+"</td>" +
                        "<td><a href='javascript:void(0);' onclick='upd(\""+list[i].shop_info_id+"\")' >修改</a>&nbsp;&nbsp;<a href='javascript:void(0);' onclick='del(\""+list[i].shop_info_id+"\")' >删除</a></td>" +
                        "</tr>";
                }
                str = str +"</table>";
                document.getElementById("div1").innerHTML = str;
                console.log("data:"+data);
            },
            error:function(data){
                alert("error:"+data);
            }
        });
    }
    //真实项目一般都会判断一下是否是null 、undefined 、NaN 、''
    //判断一下是不是undefined,
    function return_Type(types){
        return (typeof types === 'undefined') ? "未设置" : types;
    }
    //点击搜索框
    function query_search(){
        getData();
    }

    function upd(id){
        location.href = "upd.html?id="+id;
    }
    function del(id){
        //把对应的id的del改成0
        //然后重新调用查询方法
        getData();
    }
</script>
</html>